<template>
  <div class="system-collaboration-container">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <h2>系统协同模式</h2>
          <div class="status-indicator">
            <el-tag v-if="trainingStatus === 'idle'" type="info">未开始</el-tag>
            <el-tag v-else-if="trainingStatus === 'preparing'" type="warning">准备中</el-tag>
            <el-tag v-else-if="trainingStatus === 'running'" type="success">训练中</el-tag>
            <el-tag v-else-if="trainingStatus === 'paused'" type="warning">已暂停</el-tag>
            <el-tag v-else-if="trainingStatus === 'completed'" type="success">已完成</el-tag>
          </div>
        </div>
      </template>
      <div class="mode-description">
        <p>系统协同模式用于培养多系统协作环境下的工控安全防护能力，通过模拟多个工控系统协同工作的环境，提高对复杂系统安全防护的综合能力。</p>
      </div>
    </el-card>

    <div class="main-content">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-card class="environment-card">
            <template #header>
              <div class="card-header">
                <h3>协同环境选择</h3>
              </div>
            </template>
            <div class="environment-list">
              <el-radio-group v-model="selectedEnvironment" @change="handleEnvironmentChange">
                <el-radio-button v-for="item in environmentList" :key="item.id" :label="item.id">
                  {{ item.name }}
                </el-radio-button>
              </el-radio-group>
              
              <div v-if="currentEnvironment" class="environment-details">
                <div class="environment-info">
                  <h4>{{ currentEnvironment.name }}</h4>
                  <p>{{ currentEnvironment.description }}</p>
                </div>
                
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="系统数量">{{ currentEnvironment.systemCount }}个系统</el-descriptions-item>
                  <el-descriptions-item label="复杂度">
                    <el-rate
                      v-model="currentEnvironment.complexity"
                      disabled
                      show-score
                      text-color="#ff9900"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="设备类型">{{ currentEnvironment.deviceTypes }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="16">
          <el-card v-if="currentEnvironment" class="training-card">
            <template #header>
              <div class="card-header">
                <h3>训练配置</h3>
                <div class="action-buttons">
                  <el-button 
                    type="primary" 
                    @click="startTraining" 
                    :disabled="trainingStatus === 'running' || trainingStatus === 'paused'"
                  >
                    开始训练
                  </el-button>
                  <el-button 
                    v-if="trainingStatus === 'running'" 
                    type="warning" 
                    @click="pauseTraining"
                  >
                    暂停
                  </el-button>
                  <el-button 
                    v-if="trainingStatus === 'paused'" 
                    type="success" 
                    @click="resumeTraining"
                  >
                    继续
                  </el-button>
                  <el-button 
                    v-if="trainingStatus !== 'idle' && trainingStatus !== 'completed'" 
                    type="danger" 
                    @click="stopTraining"
                  >
                    停止
                  </el-button>
                </div>
              </div>
            </template>
            
            <el-tabs v-model="activeTab" class="training-tabs">
              <el-tab-pane label="环境概览" name="overview">
                <div class="system-overview">
                  <h4>系统拓扑</h4>
                  <div class="topology-chart">
                    <!-- 实际项目中这里可以放一个拓扑图组件 -->
                    <el-empty description="系统拓扑图（开发中）" />
                  </div>
                  
                  <h4 class="mt-4">系统列表</h4>
                  <el-table :data="currentEnvironment.systems" border style="width: 100%">
                    <el-table-column prop="name" label="系统名称" />
                    <el-table-column prop="type" label="系统类型" />
                    <el-table-column prop="role" label="系统角色" />
                    <el-table-column prop="deviceCount" label="设备数量" />
                    <el-table-column label="状态">
                      <template #default="scope">
                        <el-tag :type="scope.row.status === 'online' ? 'success' : 'danger'">
                          {{ scope.row.status === 'online' ? '在线' : '离线' }}
                        </el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="训练目标" name="objectives">
                <div class="training-objectives">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(objective, index) in currentEnvironment.objectives"
                      :key="index"
                      :type="getObjectiveType(objective)"
                      :color="getObjectiveColor(objective)"
                      :hollow="objective.status !== 'completed'"
                    >
                      <h4>{{ objective.title }}</h4>
                      <p>{{ objective.description }}</p>
                      <p v-if="objective.requirements" class="requirements">
                        <strong>完成要求:</strong> {{ objective.requirements }}
                      </p>
                      <div v-if="trainingStatus === 'running' || trainingStatus === 'completed'" class="objective-status">
                        <el-tag :type="getObjectiveStatusType(objective)">
                          {{ getObjectiveStatusText(objective) }}
                        </el-tag>
                      </div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="系统状态" name="status">
                <div class="system-status">
                  <el-row :gutter="16">
                    <el-col :span="8" v-for="(system, index) in currentEnvironment.systems" :key="index">
                      <el-card shadow="hover" :class="{ 'system-card': true, 'offline': system.status !== 'online' }">
                        <div class="system-header">
                          <h4>{{ system.name }}</h4>
                          <el-tag :type="system.status === 'online' ? 'success' : 'danger'" size="small">
                            {{ system.status === 'online' ? '在线' : '离线' }}
                          </el-tag>
                        </div>
                        <div class="system-metrics">
                          <div class="metric-item">
                            <span class="metric-label">CPU 使用率</span>
                            <el-progress 
                              :percentage="system.metrics?.cpu || 0" 
                              :color="getProgressColor(system.metrics?.cpu)" 
                            />
                          </div>
                          <div class="metric-item">
                            <span class="metric-label">内存使用率</span>
                            <el-progress 
                              :percentage="system.metrics?.memory || 0" 
                              :color="getProgressColor(system.metrics?.memory)" 
                            />
                          </div>
                          <div class="metric-item">
                            <span class="metric-label">网络流量</span>
                            <el-progress 
                              :percentage="system.metrics?.network || 0" 
                              :color="getProgressColor(system.metrics?.network)" 
                            />
                          </div>
                        </div>
                        <div class="system-alerts">
                          <div v-if="system.alerts && system.alerts.length > 0">
                            <h5>报警信息</h5>
                            <ul class="alert-list">
                              <li v-for="(alert, aIndex) in system.alerts" :key="aIndex" :class="alert.level">
                                <el-icon><warning /></el-icon>
                                <span>{{ alert.message }}</span>
                              </li>
                            </ul>
                          </div>
                          <el-empty v-else description="无报警信息" :image-size="50" />
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
            </el-tabs>
            
            <div v-if="trainingStatus === 'running' || trainingStatus === 'paused'" class="training-progress">
              <h4>训练进度</h4>
              <el-progress 
                :percentage="trainingProgress" 
                :status="trainingStatus === 'paused' ? 'warning' : ''"
              />
            </div>
            
            <div v-if="trainingStatus === 'completed'" class="training-result">
              <el-result
                icon="success"
                title="训练完成"
                sub-title="恭喜您完成了系统协同训练"
              >
                <template #extra>
                  <el-button type="primary" @click="viewTrainingReport">查看详细报告</el-button>
                  <el-button @click="resetTraining">重新训练</el-button>
                </template>
              </el-result>
            </div>
          </el-card>
          
          <el-empty
            v-else
            description="请选择一个协同环境"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onBeforeUnmount } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';

// 训练状态
const trainingStatus = ref('idle'); // idle, preparing, running, paused, completed
const trainingProgress = ref(0);
const trainingTimer = ref(null);
const selectedEnvironment = ref(null);
const activeTab = ref('overview');

// 协同环境列表
const environmentList = reactive([
  {
    id: 1,
    name: '工业企业网络环境',
    description: '典型工业企业IT/OT网络协同环境，包含企业网络、生产网络、监控网络等多个系统',
    systemCount: 4,
    complexity: 3,
    deviceTypes: 'SCADA服务器、HMI、PLC、网络交换机、防火墙',
    systems: [
      {
        name: '企业办公网络',
        type: 'IT网络',
        role: '信息处理',
        deviceCount: 12,
        status: 'online',
        metrics: { cpu: 42, memory: 56, network: 38 },
        alerts: []
      },
      {
        name: '工厂生产网络',
        type: 'OT网络',
        role: '生产控制',
        deviceCount: 8,
        status: 'online',
        metrics: { cpu: 65, memory: 48, network: 72 },
        alerts: [
          { level: 'warning', message: '网络流量异常波动' }
        ]
      },
      {
        name: '监控系统网络',
        type: 'OT网络',
        role: '监控',
        deviceCount: 6,
        status: 'online',
        metrics: { cpu: 28, memory: 45, network: 33 },
        alerts: []
      },
      {
        name: '安全防护系统',
        type: '安全系统',
        role: '防护',
        deviceCount: 4,
        status: 'online',
        metrics: { cpu: 52, memory: 61, network: 45 },
        alerts: []
      }
    ],
    objectives: [
      {
        title: '系统分析',
        description: '分析系统结构和通信方式',
        requirements: '识别所有系统间的通信接口和协议',
        status: 'pending',
        type: 'primary'
      },
      {
        title: '安全配置检查',
        description: '检查各系统的安全配置状态',
        requirements: '发现并记录至少3个配置问题',
        status: 'pending',
        type: 'warning'
      },
      {
        title: '协同防护策略制定',
        description: '制定系统间协同防护策略',
        requirements: '针对潜在威胁制定至少2项协同防护策略',
        status: 'pending',
        type: 'success'
      },
      {
        title: '异常监测策略验证',
        description: '验证异常监测策略有效性',
        requirements: '成功检测模拟攻击并联动响应',
        status: 'pending',
        type: 'danger'
      }
    ]
  },
  {
    id: 2,
    name: '智能电网控制系统',
    description: '智能电网多级控制系统环境，包含配电自动化系统、变电站自动化系统、调度控制系统等',
    systemCount: 5,
    complexity: 4,
    deviceTypes: 'RTU、变电站控制器、SCADA、配电自动化终端、调度工作站',
    systems: [
      {
        name: '调度控制中心',
        type: '控制中心',
        role: '监控调度',
        deviceCount: 10,
        status: 'online',
        metrics: { cpu: 58, memory: 62, network: 70 },
        alerts: []
      },
      {
        name: '变电站自动化系统',
        type: 'OT网络',
        role: '监控控制',
        deviceCount: 12,
        status: 'online',
        metrics: { cpu: 45, memory: 52, network: 48 },
        alerts: []
      },
      {
        name: '配电自动化系统',
        type: 'OT网络',
        role: '配电控制',
        deviceCount: 15,
        status: 'online',
        metrics: { cpu: 60, memory: 55, network: 65 },
        alerts: [
          { level: 'error', message: '设备通信中断告警' }
        ]
      },
      {
        name: '电力市场系统',
        type: 'IT系统',
        role: '交易管理',
        deviceCount: 5,
        status: 'online',
        metrics: { cpu: 32, memory: 48, network: 28 },
        alerts: []
      },
      {
        name: '安全接入区',
        type: '安全系统',
        role: '安全隔离',
        deviceCount: 6,
        status: 'online',
        metrics: { cpu: 38, memory: 42, network: 56 },
        alerts: []
      }
    ],
    objectives: [
      {
        title: '系统互联关系分析',
        description: '分析电网各系统间的互联关系',
        requirements: '绘制完整的系统互联拓扑图',
        status: 'pending',
        type: 'primary'
      },
      {
        title: '通信协议安全评估',
        description: '评估系统间通信协议的安全性',
        requirements: '识别至少2个协议安全隐患',
        status: 'pending',
        type: 'warning'
      },
      {
        title: '系统间访问控制检查',
        description: '检查各系统间的访问控制策略',
        requirements: '发现并修复至少3个访问控制问题',
        status: 'pending',
        type: 'success'
      },
      {
        title: '跨系统协同响应演练',
        description: '模拟攻击进行跨系统协同响应演练',
        requirements: '成功协同响应并阻断模拟攻击',
        status: 'pending',
        type: 'danger'
      },
      {
        title: '应急恢复流程验证',
        description: '验证跨系统应急恢复流程',
        requirements: '按流程成功恢复受影响系统',
        status: 'pending',
        type: 'info'
      }
    ]
  },
  {
    id: 3,
    name: '石化企业控制系统',
    description: '石化企业多工艺段控制系统环境，包含原料处理、反应、分离、储运等多个工艺环节的控制系统',
    systemCount: 6,
    complexity: 5,
    deviceTypes: 'DCS控制器、PLC、安全仪表系统、高级控制计算机、MES系统',
    systems: [
      {
        name: '中央控制系统',
        type: 'DCS系统',
        role: '集中控制',
        deviceCount: 18,
        status: 'online',
        metrics: { cpu: 72, memory: 68, network: 75 },
        alerts: []
      },
      {
        name: '原料处理系统',
        type: 'PLC系统',
        role: '过程控制',
        deviceCount: 12,
        status: 'online',
        metrics: { cpu: 65, memory: 58, network: 62 },
        alerts: []
      },
      {
        name: '反应系统',
        type: 'DCS系统',
        role: '反应控制',
        deviceCount: 15,
        status: 'online',
        metrics: { cpu: 78, memory: 72, network: 68 },
        alerts: [
          { level: 'warning', message: '温度传感器数据异常' }
        ]
      },
      {
        name: '分离系统',
        type: 'PLC系统',
        role: '分离控制',
        deviceCount: 10,
        status: 'online',
        metrics: { cpu: 62, memory: 58, network: 55 },
        alerts: []
      },
      {
        name: '储运系统',
        type: 'PLC系统',
        role: '储存运输',
        deviceCount: 14,
        status: 'online',
        metrics: { cpu: 45, memory: 52, network: 48 },
        alerts: []
      },
      {
        name: '安全仪表系统',
        type: 'SIS系统',
        role: '安全保护',
        deviceCount: 8,
        status: 'online',
        metrics: { cpu: 32, memory: 28, network: 25 },
        alerts: []
      }
    ],
    objectives: [
      {
        title: '系统安全边界分析',
        description: '分析各工艺控制系统的安全边界',
        requirements: '识别并记录所有系统间接口点',
        status: 'pending',
        type: 'primary'
      },
      {
        title: '控制系统数据流分析',
        description: '分析各控制系统间的数据流向',
        requirements: '绘制完整的数据流向图',
        status: 'pending',
        type: 'warning'
      },
      {
        title: '系统间依赖关系评估',
        description: '评估各控制系统间的依赖关系',
        requirements: '识别关键依赖点并制定保护策略',
        status: 'pending',
        type: 'success'
      },
      {
        title: '联锁保护功能测试',
        description: '测试跨系统联锁保护功能',
        requirements: '验证至少3组联锁保护功能有效性',
        status: 'pending',
        type: 'danger'
      },
      {
        title: '级联故障模拟演练',
        description: '模拟级联故障情景进行响应演练',
        requirements: '成功阻断级联故障传播',
        status: 'pending',
        type: 'info'
      },
      {
        title: '协同防护策略验证',
        description: '验证跨系统协同防护策略有效性',
        requirements: '成功应对模拟的复杂攻击场景',
        status: 'pending',
        type: 'warning'
      }
    ]
  }
]);

// 当前环境
const currentEnvironment = computed(() => {
  if (!selectedEnvironment.value) return null;
  return environmentList.find(item => item.id === selectedEnvironment.value) || null;
});

// 进度条颜色
const getProgressColor = (value) => {
  if (value < 60) return '#67C23A';
  if (value < 80) return '#E6A23C';
  return '#F56C6B';
};

// 目标类型
const getObjectiveType = (objective) => {
  return objective.type || 'primary';
};

// 目标颜色
const getObjectiveColor = (objective) => {
  const typeMap = {
    'primary': '#409EFF',
    'success': '#67C23A',
    'warning': '#E6A23C',
    'danger': '#F56C6B',
    'info': '#909399'
  };
  return typeMap[objective.type] || '#409EFF';
};

// 目标状态类型
const getObjectiveStatusType = (objective) => {
  const statusMap = {
    'pending': 'info',
    'in-progress': 'warning',
    'completed': 'success',
    'failed': 'danger'
  };
  return statusMap[objective.status] || 'info';
};

// 目标状态文本
const getObjectiveStatusText = (objective) => {
  const statusMap = {
    'pending': '待完成',
    'in-progress': '进行中',
    'completed': '已完成',
    'failed': '未完成'
  };
  return statusMap[objective.status] || '待完成';
};

// 处理环境变更
const handleEnvironmentChange = (environmentId) => {
  if (trainingStatus.value !== 'idle' && trainingStatus.value !== 'completed') {
    ElMessageBox.confirm(
      '切换环境将终止当前训练进度，确定要继续吗？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      stopTraining();
      selectedEnvironment.value = environmentId;
    }).catch(() => {
      selectedEnvironment.value = selectedEnvironment.value;
    });
  }
};

// 开始训练
const startTraining = () => {
  if (!currentEnvironment.value) {
    ElMessage.warning('请先选择一个协同环境');
    return;
  }
  
  trainingStatus.value = 'preparing';
  
  // 重置目标状态
  if (currentEnvironment.value.objectives) {
    currentEnvironment.value.objectives.forEach(objective => {
      objective.status = 'pending';
    });
  }
  
  // 模拟准备过程
  setTimeout(() => {
    trainingStatus.value = 'running';
    trainingProgress.value = 0;
    
    // 模拟训练进度
    trainingTimer.value = setInterval(() => {
      trainingProgress.value += 1;
      
      // 更新目标状态逻辑
      if (trainingProgress.value === 20 && currentEnvironment.value.objectives && currentEnvironment.value.objectives.length > 0) {
        currentEnvironment.value.objectives[0].status = 'in-progress';
      } else if (trainingProgress.value === 30 && currentEnvironment.value.objectives && currentEnvironment.value.objectives.length > 0) {
        currentEnvironment.value.objectives[0].status = 'completed';
        if (currentEnvironment.value.objectives.length > 1) {
          currentEnvironment.value.objectives[1].status = 'in-progress';
        }
      } else if (trainingProgress.value === 50 && currentEnvironment.value.objectives && currentEnvironment.value.objectives.length > 1) {
        currentEnvironment.value.objectives[1].status = 'completed';
        if (currentEnvironment.value.objectives.length > 2) {
          currentEnvironment.value.objectives[2].status = 'in-progress';
        }
      } else if (trainingProgress.value === 70 && currentEnvironment.value.objectives && currentEnvironment.value.objectives.length > 2) {
        currentEnvironment.value.objectives[2].status = 'completed';
        if (currentEnvironment.value.objectives.length > 3) {
          currentEnvironment.value.objectives[3].status = 'in-progress';
        }
      } else if (trainingProgress.value === 90 && currentEnvironment.value.objectives && currentEnvironment.value.objectives.length > 3) {
        currentEnvironment.value.objectives[3].status = 'completed';
        if (currentEnvironment.value.objectives.length > 4) {
          currentEnvironment.value.objectives[4].status = 'in-progress';
        }
      }
      
      // 模拟系统警报
      if (trainingProgress.value === 40) {
        // 添加一个警报
        const systemIndex = Math.floor(Math.random() * currentEnvironment.value.systems.length);
        currentEnvironment.value.systems[systemIndex].alerts.push({
          level: 'warning',
          message: '发现可疑网络连接尝试'
        });
        ElMessage.warning(`${currentEnvironment.value.systems[systemIndex].name}发现可疑网络连接尝试`);
      } else if (trainingProgress.value === 65) {
        // 添加另一个警报
        const systemIndex = Math.floor(Math.random() * currentEnvironment.value.systems.length);
        currentEnvironment.value.systems[systemIndex].alerts.push({
          level: 'error',
          message: '检测到异常数据包'
        });
        ElMessage.error(`${currentEnvironment.value.systems[systemIndex].name}检测到异常数据包`);
      }
      
      // 训练完成逻辑
      if (trainingProgress.value >= 100) {
        clearInterval(trainingTimer.value);
        trainingStatus.value = 'completed';
        trainingProgress.value = 100;
        
        // 完成所有未完成的目标
        if (currentEnvironment.value.objectives) {
          currentEnvironment.value.objectives.forEach(objective => {
            if (objective.status !== 'completed') {
              objective.status = 'completed';
            }
          });
        }
        
        ElMessage.success('训练已完成');
      }
    }, 300);
  }, 1500);
};

// 暂停训练
const pauseTraining = () => {
  if (trainingStatus.value === 'running') {
    trainingStatus.value = 'paused';
    clearInterval(trainingTimer.value);
    ElMessage.info('训练已暂停');
  }
};

// 继续训练
const resumeTraining = () => {
  if (trainingStatus.value === 'paused') {
    trainingStatus.value = 'running';
    
    // 继续进度更新
    trainingTimer.value = setInterval(() => {
      trainingProgress.value += 1;
      
      // 训练完成逻辑
      if (trainingProgress.value >= 100) {
        clearInterval(trainingTimer.value);
        trainingStatus.value = 'completed';
        trainingProgress.value = 100;
        
        // 完成所有未完成的目标
        if (currentEnvironment.value.objectives) {
          currentEnvironment.value.objectives.forEach(objective => {
            if (objective.status !== 'completed') {
              objective.status = 'completed';
            }
          });
        }
        
        ElMessage.success('训练已完成');
      }
    }, 300);
    
    ElMessage.info('训练已继续');
  }
};

// 停止训练
const stopTraining = () => {
  if (trainingStatus.value !== 'idle' && trainingStatus.value !== 'completed') {
    clearInterval(trainingTimer.value);
    trainingStatus.value = 'idle';
    trainingProgress.value = 0;
    
    // 重置目标状态
    if (currentEnvironment.value.objectives) {
      currentEnvironment.value.objectives.forEach(objective => {
        objective.status = 'pending';
      });
    }
    
    // 清除所有警报
    if (currentEnvironment.value.systems) {
      currentEnvironment.value.systems.forEach(system => {
        system.alerts = [];
      });
    }
    
    ElMessage.warning('训练已停止');
  }
};

// 重置训练
const resetTraining = () => {
  trainingStatus.value = 'idle';
  trainingProgress.value = 0;
  clearInterval(trainingTimer.value);
  
  // 重置目标状态
  if (currentEnvironment.value.objectives) {
    currentEnvironment.value.objectives.forEach(objective => {
      objective.status = 'pending';
    });
  }
  
  // 清除所有警报
  if (currentEnvironment.value.systems) {
    currentEnvironment.value.systems.forEach(system => {
      system.alerts = [];
    });
  }
};

// 查看训练报告
const viewTrainingReport = () => {
  ElMessageBox.alert(
    '详细训练报告功能正在开发中，敬请期待',
    '功能提示',
    {
      confirmButtonText: '确定'
    }
  );
};

// 组件销毁前清理定时器
onBeforeUnmount(() => {
  if (trainingTimer.value) {
    clearInterval(trainingTimer.value);
  }
});
</script>

<style lang="scss" scoped>
.system-collaboration-container {
  padding: 16px;
  
  .header-card {
    margin-bottom: 16px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h2 {
        margin: 0;
        font-size: 18px;
        color: var(--text-color);
      }
    }
    
    .mode-description {
      margin-top: 10px;
      color: var(--text-color-secondary);
    }
  }
  
  .main-content {
    margin-bottom: 16px;
    
    .environment-card {
      height: 100%;
      
      .card-header {
        h3 {
          margin: 0;
          font-size: 16px;
          color: var(--text-color);
        }
      }
      
      .environment-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .environment-details {
          margin-top: 16px;
          
          .environment-info {
            margin-bottom: 16px;
            
            h4 {
              margin: 0 0 8px;
              font-size: 16px;
              color: var(--text-color);
            }
            
            p {
              color: var(--text-color-secondary);
              margin: 0;
            }
          }
        }
      }
    }
    
    .training-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h3 {
          margin: 0;
          font-size: 16px;
          color: var(--text-color);
        }
        
        .action-buttons {
          display: flex;
          gap: 8px;
        }
      }
      
      .training-tabs {
        margin-bottom: 16px;
        
        .system-overview {
          h4 {
            margin: 16px 0 8px;
            font-size: 14px;
            color: var(--text-color);
            
            &.mt-4 {
              margin-top: 24px;
            }
          }
          
          .topology-chart {
            height: 240px;
            border: 1px dashed var(--border-color);
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        
        .training-objectives {
          h4 {
            margin: 0 0 8px;
            font-size: 14px;
            color: var(--text-color);
          }
          
          p {
            margin: 4px 0;
            color: var(--text-color-secondary);
            
            &.requirements {
              font-size: 13px;
              margin-top: 8px;
            }
          }
          
          .objective-status {
            margin-top: 8px;
          }
        }
        
        .system-status {
          .system-card {
            margin-bottom: 16px;
            transition: all 0.3s;
            
            &.offline {
              opacity: 0.6;
              filter: grayscale(50%);
            }
            
            .system-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 12px;
              
              h4 {
                margin: 0;
                font-size: 14px;
                color: var(--text-color);
              }
            }
            
            .system-metrics {
              .metric-item {
                margin-bottom: 8px;
                
                .metric-label {
                  display: block;
                  font-size: 12px;
                  color: var(--text-color-secondary);
                  margin-bottom: 4px;
                }
              }
            }
            
            .system-alerts {
              margin-top: 16px;
              padding-top: 16px;
              border-top: 1px solid var(--border-color-light);
              
              h5 {
                margin: 0 0 8px;
                font-size: 13px;
                color: var(--text-color);
              }
              
              .alert-list {
                list-style: none;
                padding: 0;
                margin: 0;
                
                li {
                  display: flex;
                  align-items: center;
                  padding: 4px 0;
                  font-size: 12px;
                  color: var(--text-color-secondary);
                  
                  &.warning {
                    color: var(--warning-color);
                  }
                  
                  &.error {
                    color: var(--danger-color);
                  }
                  
                  .el-icon {
                    margin-right: 4px;
                  }
                }
              }
            }
          }
        }
      }
      
      .training-progress {
        margin-top: 24px;
        
        h4 {
          margin: 0 0 8px;
          font-size: 14px;
          color: var(--text-color);
        }
      }
      
      .training-result {
        margin-top: 16px;
      }
    }
  }
}
</style> 